<template>
	<view class="content">
		<nav-bar title='资料填写' black bgColor="rgba(255,255,255,0)" titleColor="#333333"></nav-bar>
		<view class="head-box">
			<view class="p1">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/casepage_icon_need.png"
					iconStyle="font-size: 19px;margin-right: 10rpx" size="32rpx" :bold="true" color="#ffffff"
					text="需求额度"></u--text>
				<text class="h1">快速审批 随用随还</text>
			</view>
			<view class="p2">
				<view class="top">
					需求额度（万）
				</view>
				<view class="middle">
					<view class="left">
						{{eduValue}}
					</view>
					<view class="right" @click="editEdTap">
						修改额度
					</view>
				</view>
				<view class="bottom-tips">
					最低日利率<text>0.002%</text> （年化利率 <text>3.6%</text>）
				</view>
			</view>
			<u-modal :show="editShow" title="修改额度" :showCancelButton="true" :closeOnClickOverlay="true" @close="close"
				@cancel="close" @confirm="eduConfirm">
				<view class="input-box">
					<u-input border="none" v-model="eduValue">

					</u-input>
				</view>
			</u-modal>
			<!-- <view class="edit-popup-box">
				<u-popup mode="center" :show="editShow" :round="10" @close="close">
					<view class="input-box">
						<u-input border="none" v-model="eduValue">
			
						</u-input>
					</view>
				</u-popup>
			</view> -->
		</view>

		<view class="middle-box">
			<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/casepage_icon_edit.png"
				iconStyle="font-size: 19px;margin:24rpx 10rpx" size="32rpx" :bold="true" color="#587EAE"
				text="信息填写"></u--text>
			<view class="item-box">
				<view class="item">
					<view class="left">
						申请人
					</view>
					<view class="right">
						<u--input placeholder="申请人" fontSize="24rpx" border="none" v-model="nameValue"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="left">
						联系电话
					</view>
					<view class="right">
						<u--input placeholder="联系电话" fontSize="24rpx" border="none" v-model="phoneValue"></u--input>
					</view>
				</view>
				<view class="item switch-item">
					<view class="left">
						有无房产
					</view>
					<view class="right">
						<u-switch v-model="homeValue" activeColor="#ff8811"></u-switch>
					</view>
				</view>
				<block v-if="homeValue">
					<view class="item">
						<view class="left">
							小区名称
						</view>
						<view class="right">
							<u--input placeholder="请填写小区名称" fontSize="24rpx" border="none"
								v-model="addressValue"></u--input>
						</view>
					</view>
					<view class="item">
						<view class="left">
							面积
						</view>
						<view class="right">
							<u--input placeholder="请填写房产面积" fontSize="24rpx" border="none"
								v-model="areaValue"></u--input>
						</view>
					</view>
					<view class="item">
						<view class="left">
							价值
						</view>
						<view class="right">
							<u--input placeholder="请填写房产价值" fontSize="24rpx" border="none"
								v-model="homeMoneyValue"></u--input>
						</view>
					</view>
				</block>
				<view class="item switch-item">
					<view class="left">
						有无车辆
					</view>
					<view class="right">
						<u-switch v-model="carValue" activeColor="#ff8811"></u-switch>
					</view>
				</view>
				<block v-if="carValue">
					<view class="item">
						<view class="left">
							车辆名称
						</view>
						<view class="right">
							<u--input placeholder="请填写车辆名称" fontSize="24rpx" border="none"
								v-model="carNumValue"></u--input>
						</view>
					</view>
					<view class="item">
						<view class="left">
							车辆价值
						</view>
						<view class="right">
							<u--input placeholder="请填写车辆价值" fontSize="24rpx" border="none"
								v-model="carMoneyValue"></u--input>
						</view>
					</view>
				</block>
				<view class="item switch-item">
					<view class="left">
						职业
					</view>
					<view class="right">
						<text-switch style="width: 160rpx;float: left;" @switchFunction="switchChangeFun"
							:switchType="'text'" :defaultColor="'#ff8811'" :highColor="'#FFFFFF'"
							:defaultValue="workClassifyValue" :switchList="workClassify" :itemIndex="0"></text-switch>
					</view>
				</view>
				<block v-if="workClassifyValue == 0">
					<view class="item">
						<view class="left">
							企业名称
						</view>
						<view class="right">
							<u--input placeholder="法人请填写企业名称" fontSize="24rpx" border="none"
								v-model="businessvalue"></u--input>
						</view>
					</view>
					<view class="item">
						<view class="left">
							年度流水
						</view>
						<view class="right">
							<u--input placeholder="法人请填写年度流水" fontSize="24rpx" border="none"
								v-model="yearRecord"></u--input>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="item">
						<view class="left">
							打卡工资金额
						</view>
						<view class="right">
							<u--input placeholder="请填写打卡工资金额" fontSize="24rpx" border="none"
								v-model="payValue"></u--input>
						</view>
					</view>
					<view class="item">
						<view class="left">
							社保年限
						</view>
						<view class="right">
							<u--input placeholder="请填写社保年限" fontSize="24rpx" border="none"
								v-model="socialValue"></u--input>
						</view>
					</view>
				</block>
				<view class="item">
					<view class="left">
						保单信息
					</view>
					<view class="right">
						<u--input placeholder="请填写你的相关保单信息" fontSize="24rpx" border="none"
							v-model="olicyValue"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="left">
						其他补充
					</view>
					<view class="right">
						<u--input placeholder="请填写补充" fontSize="24rpx" border="none" v-model="otherValue"></u--input>
					</view>
				</view>
				<view class="item" style="height: 48rpx;">
					<view class="left">
						预约时间
					</view>
					<view class="right" @click="oppoTimeClick" >
						<u--input placeholder="选择预约时间" fontSize="24rpx" border="none" v-model="oppoNewTime"
							v-if="oppoTimeShow == false"></u--input>
						<u-datetime-picker :show="oppoTimeShow" v-model="oppoTime" mode="datetime"
							@change="oppoTimeChange" @close="oppoTimeClose" @cancel="cancel" closeOnClickOverlay
							@confirm="oppoTimeConfirm"></u-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottom">
			<view class="p1">
				<u--text prefixIcon="https://item.techolic.cn/hjf/Public/appimg/icon_my_vip1.png"
					iconStyle="font-size: 19px;margin-right:10rpx" size="32rpx" :bold="true" color="#587EAE"
					text="相关凭证上传"></u--text>
				<view class="right">
					支持上传图片或文件
				</view>
			</view>
			<view class="p2">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
		</view> -->
		<view class="btn-box" @click="post_vlaue">
			确认无误并提交
		</view>
		<view class="fgx"></view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				fileList1: [],
				editShow: false,
				eduValue: '200000',
				homeValue: false, //有无房产

				nameValue: '', //申请人
				phoneValue: '', //联系电话
				addressValue: '', //小区名称
				areaValue: '', //房产面积
				homeMoneyValue: '', //房产价值
				workClassifyValue: 0, //职位分类值
				workClassify: [{
						title: '法人',
						value: 0
					},
					{
						title: '工薪',
						value: 1
					}
				],
				carValue: false, //有无车辆
				// workClassify: false,
				workValue: '',
				carNumValue: '', //车辆名称
				carMoneyValue: '', //车辆价值
				payValue: '', //工资金额
				yearRecord: '', //年度流水
				businessvalue: '', //企业名称
				socialValue: '', //社保年限
				oppoNewTime: '', //预约时间
				oppoTimeShow: '', //预约时间show
				oppoTime: new Date(),
				olicyValue: '',
				otherValue: '',
				pid: 0,
			}
		},
		onLoad(e) {
			console.log(e);
			if (typeof(e.id) !== undefined) {
				this.pid = e.id;
			}

		},
		mounted() {
			app.login();
		},
		methods: {
			switchChangeFun(e) {
				console.log('触发 switchChangeFun');
				console.log(e);
				//重新赋值，改变该值用于设置switch默认值
				this.workClassifyValue = e.swithcSelectItem.value;
				console.log(this.workClassifyValue);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			editEdTap(e) {
				let that = this;
				that.editShow = true;
			},
			eduConfirm() {
				let that = this;
				console.log(that.eduValue)
				that.editShow = false;
			},
			close() {
				let that = this;
				that.editShow = false;
			},
			oppoTimeClick(){
				let that = this;
				that.oppoTimeShow = true;
			},
			oppoTimeClose() {
				let that = this;
				that.oppoTimeShow = false;
				console.log(112)
				console.log(that.oppoTimeShow)
			},
			cancel() {
				let that = this;
				that.oppoTimeShow = false;
			},
			oppoTimeChange(e) {
				console.log(e)
				let that = this;
				that.oppoTime = e.value
				that.oppoNewTime = that.get_time()
				console.log(that.get_time())
				// console.log(that.oppoTime)
			},
			oppoTimeConfirm(e) {
				console.log(e)
				let that = this;
				that.oppoTimeShow = false;
				this.oppoNewTime = that.get_time()
				// that.oppoTime = e.value;

			},
			get_time() {
				var date = new Date(this.oppoTime);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				// let s = date.getSeconds();
				// s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			},
			post_vlaue() {
				var _this = this;
				var pid = _this.pid;
				var name = _this.nameValue; //edu
				var phone = _this.phoneValue; //edu
				var money = _this.eduValue; //edu
				var is_house = _this.homeValue; //是否有房产
				var house_name = _this.addressValue; //房名
				var house_area = _this.areaValue; //面积
				var house_money = _this.homeMoneyValue; //价值

				var is_car = _this.carValue; //是否有车
				var car_name = _this.carNumValue; //车名
				var car_money = _this.carMoneyValue; //车价格
				var is_occupation = _this.workClassifyValue;
				var income = _this.payValue; //收入
				var units = _this.businessvalue; //单位名称
				var annual_flow = _this.yearRecord; //年度流水
				var social_security = _this.socialValue; //社保年限
				var warranty = _this.olicyValue; //保单
				var other = _this.otherValue; //其他
				var oppoNewTime = _this.oppoNewTime;

				if (phone == '') {
					app.showMsg('请填写联系电话');
					return false;
				}
				uni.showLoading({
					title: "提交中...",
					mask: true
				});


				app._post_form('user/requirement', {
					pid: pid,
					cid: app.globalData.cid,
					name: name,
					phone: phone,
					money: money,
					is_house: is_house,
					house_name: house_name,
					house_area: house_area,
					house_money: house_money,
					is_car: is_car,
					car_name: car_name,
					car_money: car_money,
					income: income,
					units: units,
					warranty: warranty,
					other: other,
					is_occupation: is_occupation,
					annual_flow: annual_flow,
					social_security: social_security,
					subscribe_time: oppoNewTime,
				}, function(result) {
					app.showMsg(result.msg);
				}, false, function() {
					//uni.hideLoading();
				});
			},
		}
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		min-height: 1334rpx;
		background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		background-repeat: no-repeat;
		background-size: cover;

		.head-box {
			margin: 32rpx;
			border-radius: 24rpx;
			background-color: #FC945A;

			.p1 {
				display: flex;
				align-items: center;
				padding: 24rpx;

				.h1 {
					font-size: 24rpx;
					color: rgba(#ffffff, 0.5);
				}
			}

			.p2 {
				padding: 32rpx;
				background-color: #feefe4;
				margin: 4rpx;
				border-radius: 22rpx;

				.top {
					font-size: 28rpx;
					color: rgba(#7C4608, .0.5);
					margin-bottom: 20rpx;
				}

				.middle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.left {
						font-size: 64rpx;
						color: #7C4608;
						font-weight: bold;
					}

					.right {
						padding: 8rpx 16rpx;
						background-color: #F8DEC5;
						color: #7C4608;
						font-size: 24rpx;
						border-radius: 24rpx;

					}

				}

				.bottom-tips {
					font-size: 24rpx;
					color: rgba(#1E182F, 0.5);

					text {
						color: #FF8811;
					}
				}
			}
		}

		.middle-box {
			margin: 32rpx;
			background-color: #C2D3ED;
			border-radius: 24rpx;

			.item-box {
				padding: 24rpx;
				background-color: #ffffff;
				border-radius: 22rpx;

				.item {
					margin: 20rpx;
					display: flex;
					align-items: center;

					.left {
						width: 27%;
						font-size: 24rpx;
						color: #979797;
						// margin-right: 88rpx;
					}

					.right {
						width: 73%;

						input {
							color: #C8C8C8;
						}
					}
				}

				.switch-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.bottom {
			margin: 32rpx;
			border-radius: 24rpx;
			background-color: #C2D3ED;

			.p1 {
				display: flex;
				align-items: center;
				padding: 32rpx;

				.right {
					font-size: 20rpx;
					color: #5B78B7;
				}
			}

			.p2 {
				padding: 20rpx;
				background: #ffffff;
				border-radius: 16rpx;
			}
		}

		.btn-box {
			height: 88rpx;
			line-height: 88rpx;
			margin: 32rpx;
			text-align: center;
			font-size: 32rpx;
			color: #ffffff;
			background-color: #FF8811;
			border-radius: 18rpx;
		}

		.fgx {
			height: 150rpx;
		}

		.input-box {
			width: 100%;
		}
	}
</style>